<template>
  <div class="page-view">
    <!-- <van-tabs>
      <van-tab
        v-for="index in 8"
        :key="index"
        :title="'标签 ' + index"
      >
        内容 {{ index }}
      </van-tab>
    </van-tabs> -->
    <van-tabs
      v-model="activeClassTab"
      title-active-color="#333333"
      :line-height="3"
      :line-width="6"
      :ellipsis="false"
      color="#04CABC"
      @change="onClassTabChange"
    >
      <van-tab
        v-for="classItem in classList"
        :key="classItem.ClassId"
        :title="classItem.ClassName"
      />
    </van-tabs>
    <van-tabs
      v-model="activeQuestionTab"
      color="#04CABC"
      title-active-color="#333333"
      :line-height="3"
      :line-width="activeBarWidth"
      class="tabs-view no-border-top"
      @change="onQuestionTabChange"
    >
      <!-- 模拟考试 -->
      <van-tab
        title="模拟考试"
        class="tab"
      >
        <CollectionOrWrong
          v-if="questionList0.length > 0"
          v-model="active0CourseId"
          :course-list="questionList0"
          :type="1"
          :class-id="curClassId"
        />
        <div
          v-else-if="questionList0.length <= 0 && isFinished0"
          class="nodata"
        >
          <NoData>您还没有错题记录~</NoData>
        </div>
      </van-tab>
      <!-- 历年真题 -->
      <van-tab
        title="历年真题"
        class="tab"
      >
        <CollectionOrWrong
          v-if="questionList1.length > 0"
          v-model="active1CourseId"
          :course-list="questionList1"
          :type="2"
          :class-id="curClassId"
        />
        <div
          v-else-if="questionList1.length <= 0 && isFinished1"
          class="nodata"
        >
          <NoData>您还没有错题记录~</NoData>
        </div>
      </van-tab>
    </van-tabs>
    <div
      v-show="isLoading"
      class="loading-mask"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {
    NoData: () => import('components/Class/NoData.vue'),
    CollectionOrWrong: () => import('components/Mine/CollectionOrWrong.vue'),
  },
  data () {
    return {
      activeBarWidth: Math.floor(document.documentElement!.clientWidth / 2),
      questionList0: [],
      mockCourseId: '',
      questionList1: [],
      realCourseId: '',
      isFinished1: false,
      isFinished0: false,
      classList: [] as any[],
      prevActiveClassTab: 0,
      activeClassTab: 0,
      activeQuestionTab: 0,
      isLoading: false,
      questionListData: {} as any,
      active0CourseId: 0,
      active1CourseId: 0,
    }
  },
  computed: {
    curClassId (): number {
      return this.classList[this.activeClassTab].ClassId
    },
  },
  created () {
    this.fetchClassList()
  },
  methods: {
    onClassTabChange (activeClassIdx: number) {
      // 缓存当前数据
      this.$set(this.$data.questionListData, this.prevActiveClassTab, {
        isFinished0: this.isFinished0,
        isFinished1: this.isFinished1,
        questionList0: this.questionList0,
        questionList1: this.questionList1,
        activeQuestionTab: this.activeQuestionTab,
        active0CourseId: this.active0CourseId,
        active1CourseId: this.active1CourseId,
      })
      if (this.questionListData[activeClassIdx]) {
        const {
          isFinished0,
          isFinished1,
          questionList0,
          questionList1,
          activeQuestionTab,
          active0CourseId,
          active1CourseId,
        } = this.questionListData[activeClassIdx]
        this.isFinished0 = isFinished0
        this.isFinished1 = isFinished1
        this.questionList0 = questionList0
        this.questionList1 = questionList1
        this.activeQuestionTab = activeQuestionTab
        this.active0CourseId = active0CourseId
        this.active1CourseId = active1CourseId
      } else {
        this.isFinished0 = false
        this.isFinished1 = false
        this.questionList0 = []
        this.questionList1 = []
        this.activeQuestionTab = 0
        this.getMyWrongList()
      }
      this.prevActiveClassTab = activeClassIdx
    },
    onQuestionTabChange () {
      if (!(this as any)['isFinished' + this.activeQuestionTab]) {
        this.getMyWrongList()
      }
    },
    fetchClassList () {
      this.$axios({
        url: 'user/GetUserClassList',
        method: 'get',
        // data: {
        //   CatagoryId: this.CategoryId,
        // },
      }).then(res => {
        this.$set(this.$data, 'classList', res)
        if (res.length) {
          this.getMyWrongList()
        } else {
          this.isLoading = false
          this.isFinished0 = true
          this.isFinished1 = true
        }
      })
    },
    // type: 1模拟考试 2历年真题
    getMyWrongList () {
      console.log(this.activeQuestionTab)
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      this.$axios({
        method: 'get',
        url: 'UserWrongQuestion/ExamPaperListForH5',
        data: {
          PaperType: this.activeQuestionTab + 1,
          ClassId: this.classList[this.activeClassTab].ClassId,
        },
      }).then(res => {
        this.isLoading = false
        this.$set(this.$data, `questionList${this.activeQuestionTab}`, res.CourseList)
        this.$set(this.$data, `isFinished${this.activeQuestionTab}`, true)
        this.$set(this.$data, `active${this.activeQuestionTab}CourseId`,
          res.CourseList[0] ? res.CourseList[0].CourseId : 0)
      })
    },
  },

})
</script>

<style lang="scss" scoped>
.page-view {
  min-height: 100%;
  background: #FFF;
}
.tabs-view {
  /deep/ .van-tabs--line .van-tabs__wrap{
    height: 97px;
  }
  /deep/ .van-ellipsis{
    font-size: 32px;
  }
}
/deep/ .van-tabs__line {
  border-radius: 0px;
}
.nodata {
  text-align: center;
  margin-top: 240px;
}
.no-text {
  font-size: 36px;
  color: #666666;
}
.loading-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2.34666rem;
  z-index: 100;
}
</style>
